import React, { Component } from 'react'

import { Link } from 'react-router-dom'

import { Button } from 'antd'
export default class home extends Component {
  render() {
    /**  history  location  match  三个路由 属性 */
    const { history:{go, push, replace} } = this.props
    /** 
     * push, replace 的区别
     *      push：会将操作放到浏览器的历史记录，但是replace则不会
     *      replace：跳转效果看上去像返回两层
     */
    return (
      <div>
          动态路由参数  <br />
          <Link to={{ pathname: '/list/1', search: "?a=1&b=1&c=1", hash: "#a", state: { title:"商品列表 - 商品1" } }} >商品1</Link>
          <Link to={{ pathname: '/list/2', search: "?a=2&b=2&c=2", hash: "#b", state: { title:"商品列表 - 商品2" } }} >商品2</Link>
          <Link to={{ pathname: '/list/3', search: "?a=3&b=3&c=3", hash: "#c", state: { title:"商品列表 - 商品3" } }} >商品3</Link>
          <hr />
          {/* 就是 页面 跳转 */}
          <Link to="/user" > 去user </Link>  <br/>
            <hr />
          使用编程式导航 来进行 页面 跳转
          <Button type='primary' onClick={() => {go(-1)}} > 返回 </Button> <br />
          <Button type='danger' onClick={() => {push("/user")}} > 跳转到个人中心 </Button>
      </div>
    )
  }
}
